<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <!--滚动内容区域-->
            <scroll-view :refresher-enabled="false" class="scroll-content" @scrolltolower="scrolltolower"
                @scroll="scrollPage" @refresherrefresh="refresherpulling" :refresher-triggered="isrefresher" scroll-y
                :lower-threshold="110"  show-scrollbar="false">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top" :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar">
                    </van-nav-bar>
                    <!-- <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view> -->
                </view>
                <view class="scroll-card">
                    <!-- 背景图轮播哦 -->
                    <view class="sur_box_bg">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/installService_bg.png"
                            alt="">
                    </view>
                    <view class="card_top">
                        <view class="card_top_other">
                            <view class="other_padding">
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">三方对比</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">极速响应</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">安心保证</view>
                                </view>
                                <view class="other_item">
                                    <view class="other_icon"> <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/biaoshi.png"
                                            alt="" /> </view>
                                    <view class="other_text">售后无忧</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 应用 功能分类 -->
                    <view class="functionBox">
                        <!-- 横向两个分类 -->
                        <view class="functionBoxBottom">
                            <!-- 水电 -->
                            <view class="functionBoxBottomItem" @tap="toCategorize(0)">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/waterAndElectricity_banner.png"
                                    alt="" mode="widthFix">
                            </view>
                            <!-- 家电 -->
                            <view class="functionBoxBottomItem" @tap="toCategorize(1)">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/jiadainInstall_banner.png"
                                    alt="" mode="widthFix">
                            </view>
                        </view>
                    </view>
                    <!-- 服务分类 -->
                    <view class="hotService">
                        <view class="hotServiceTop">
                            <view class="hotIcon"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find/pintuan.png"
                                    alt=""></view>
                            <view class="hotServiceTitle">热门服务</view>
                        </view>
                        <view class="card_top_content">
                            <view class="service_item" v-for="(item,index) in serviceItems" :key="index">
                                <view class="service_icon"> <img :src="item.iconUrl" alt="" /> </view>
                                <view class="service_text">{{item.name}}</view>
                            </view>
                            <!-- <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/rangeHoodY_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">油烟机</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/gasCooker_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">燃气灶</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/jichengzao_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">集成灶</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/washingMachine_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">洗衣机</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> 
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/matong_icon.png" alt="" />
                                 </view>
                                <view class="service_text">马桶</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/kongtiao_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">空调</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/bingxiang_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">冰箱</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/dianlutiaozha_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">电路跳闸</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shuilongtou_icon.png"
                                        alt="" /> </view>
                                <view class="service_text">水龙头</view>
                            </view>
                            <view class="service_item">
                                <view class="service_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/waterPurifier_icon.png" alt="" /> </view>
                                <view class="service_text">净水机</view>
                            </view> -->
                        </view>
                    </view>

                    <!-- banner图 -->
                    <view class="card_three_banner middle">
                        <view class="card_top_banner">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/installService_banner.png"
                                alt="">
                        </view>
                        <view class="card_middle_bottom">
                            <view class="middle_title">特约服务</view>
                            <view class="middle_subtitle">专业事交给专业的人·选择我们，我们宠您!</view>
                            <view class="card_middle_bottom_banner">
                                <view class=" middle_position bottom_left">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/installService_leftbanner.png"
                                        alt="" mode="widthFix">
                                </view>
                                <view class=" middle_position bottom_middle">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/installService_middlebanner.png"
                                        alt="" mode="widthFix">
                                </view>
                                <view class=" middle_position bottom_right">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/installService_rightbanner.png"
                                        alt="" mode="widthFix">
                                </view>
                            </view>
                        </view>
                    </view>

                    <!-- 流程 -->
                    <view class="card_process">
                        <view class="card_process_title">服务流程</view>
                        <view class="card_process_content">
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/reserve.png"
                                        alt="" /> </view>
                                <view class="process_text">预约成功</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/serve.png"
                                        alt="" /> </view>
                                <view class="process_text">上门服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/finish.png"
                                        alt="" /> </view>
                                <view class="process_text">完成服务</view>
                            </view>
                            <view class="process_item">
                                <view class="arrow_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/orange_arrow.png"
                                        alt="" /></view>
                            </view>
                            <view class="process_item">
                                <view class="process_icon"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/judge.png"
                                        alt="" /> </view>
                                <view class="process_text">服务评价</view>
                            </view>
                        </view>

                    </view>
                    <view class="card_service_list">
                        <view class="goodsListBox">
                            <view class="serviceGoodsList" v-for="(itemL, indexL) in serviceGoodsList" :id="indexL"
                                :key="indexL" @click="toGoodsDetail(itemL, indexL)">
                                <view class="serviceGoods_img"> <img :src="itemL.imgurl" alt="" mode="widthFix"> </view>
                                <view class="serviceGoods_title ">{{ itemL.title }}</view>
                                <view class="serviceGoods_subtitle ">{{ itemL.detail }}</view>
                                <view class="serviceGoods_price ">{{ itemL.price }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>

export default {
    components: {

    },
    data () {
        return {
            name: '',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            isrefresher: false,
            tableList: [],
            title:'安装维修',
            serviceItems:[
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/rangeHoodY_icon.png',
                    name:'油烟机',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/gasCooker_icon.png',
                    name:'然灶台',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/jichengzao_icon.png',
                    name:'集成灶',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/washingMachine_icon.png',
                    name:'洗衣机',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/matong_icon.png',
                    name:'马桶',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/kongtiao_icon.png',
                    name:'空调',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/bingxiang_icon.png',
                    name:'冰箱',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/dianlutiaozha_icon.png',
                    name:'电路跳闸',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/shuilongtou_icon.png',
                    name:'水龙头',
                },
                {
                    iconUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/waterPurifier_icon.png',
                    name:'净水机',
                },
            ],
            serviceGoodsList: [ //热卖商品
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/applicationCleanPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/applicationCleanPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/applicationCleanPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              },
              {
                imgurl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/applicationCleanPic.png',
                detail: '1次*4小时',
                title: '做饭初次体验',
                price: '¥169'
              }
            ],
        }
    },
    onLoad (options) {
        console.log(options, 'options.name')
    },
    onReady () {
        this.onRefresherMethod()
        this.topStyleWhite()
    },
    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod () {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            this.loadingIsShow = false
                    // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                    this.time = setTimeout(e => {
                        this.isrefresher = false
                    }, 300)
           
        },
        scrolltolower () {

        },
        //    页面滑动
        scrollPage(e) {
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            console.log('顶部滚动距离', e.detail.scrollTop)
            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)rgba(127, 198, 185, 1)
        },
        // 返回箭头
        onClickLeft () {
            uni.navigateBack()
        },
        topStyleWhite () {
            // 手机顶部
            // eslint-disable-next-line no-undef
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            })
        },
        toGoodsDetail(itemL, indexL){},

        // 跳转分类页面
        toCategorize(val){
            const params={}
            params.pageSign='2'
            params.val=val
            uni.navigateTo({
                url:'/pages/service/serviceClassification?params='+
                encodeURIComponent(JSON.stringify(params))
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	overflow: hidden;
    z-index: -2;
	background-size: 100%;
	background-color: #F9F9F9;
}
.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: #F9F9F9;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent;
}

::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep #navBar .van-icon {
    color: #111111 !important;
}


.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll-content-box{
    flex: 1;
    height: 1px;
}

.backIcon {
    margin-top: 8px;
}

.scroll-card {
    // padding: 105px 12px 48px;
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
// 背景图部分
.sur_box_bg {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 440rpx;

	img {
		width: 100%;
		height: 440rpx;
	}

    // .pageTopTitleContent{
    //     position: absolute;
    //     top: 221rpx;
    //     right: 69rpx;
    //     .pageTopTitle{
    //         font-size: 48rpx;
    //         text-align: right;
    //         color: #4E78D1;
    //         line-height: 48rpx;
    //     }
    //     .pageTopSubtitle{
    //         margin-top: 22rpx;
    //         border-radius: 15px;
    //         background: #4e78d1;
    //         font-size: 20rpx;
    //         line-height: 20rpx;
    //         text-align: right;
    //         color: #FFFFFF;
    //         padding: 5rpx 14rpx;
    //     }
    // }
}
// .topFunctionsBox{
//     margin-left: 24rpx;
//     margin-right: 24rpx;
//     display: flex;
//     justify-content: space-between;
//     padding-bottom: 28rpx;

//     .functionItem{
//         width: calc((100% - 58rpx)/3);
//         // height: 192rpx;
//         text-align: center;

//         .functionItem_img{
//             width: 100%;
//             display: flex;
//             flex-direction: column;
//             justify-content: center;

//             img{
//                 width: 100%;
//                 height: 100%;
//             }
//         }

//         .functionText{
//             margin-top: 17rpx;
//             color: #333333;
//             font-size: 28rpx;
//             line-height: 28rpx;
//         }
//     }
// }
// 功能 分类
.functionBox{
    background-color: transparent;
    margin-top: 8rpx;
    margin: 0rpx 24rpx;

    // 三个分类
    .functionBoxTop, .functionBoxBottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    // // .functionBoxBottom{
    // //     margin-top: 25rpx;
    // // }
    // // 放图片的盒子
    // .functionBoxTopItem{
    //     width: calc((100% - 44rpx)/3);
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
        
    //     img{
    //         width: 100%;
    //         height: auto;
    //     }
    // }
    // 
    .functionBoxBottomItem{
        width: calc((100% - 26rpx)/2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        img{
            width: 100%;
            height: auto;
        }
    }
}
// 
.card_top{
    // border-radius: 12px;
    background: transparent;
    margin-left: 24rpx;
    margin-right: 24rpx;
    // margin-top: 394rpx;
    // margin-top: -45rpx;
    margin-top: 374rpx;
    z-index: 1;

}

.card_top_other{
    border-radius:0 0 12px 12px;
    // background: linear-gradient( #FFFFFF, #DBF9F4);
    background-color: transparent;

    .other_padding{
        padding:24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
.other_item{
    flex: 1;
    display: flex;
    align-items: center;
    line-height: 26rpx;
    .other_icon{
        margin-right: 5px;
        line-height: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img{
            width: 9px;
            height: 9px;
        }
    }
    .other_text{
        font-weight: 400;
        font-size:26rpx;
        text-align: left;
        color: #333333;
        line-height: 26rpx;
    }
}
// 热门服务
.hotService{
    background-color: #ffffff;
    border-radius:25px;
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    padding-top: 24rpx;

    .hotServiceTop{
        display: flex;
        align-items: center;
        padding: 0rpx 24rpx;
        .hotIcon{
            width: 32rpx;
            height: 38rpx;
            margin-right: 10rpx;
            img{
                width: 32rpx;
                height: 38rpx;
            }
        }
        .hotServiceTitle{
            font-weight: bolder;
            font-size: 37rpx;
            line-height: 37rpx;
            text-align: left;
            color: #111111;
        }

    }
}
// 热门服务图标
.card_top_content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    align-items: center;
    text-align: center;
    margin-top: 24rpx;
    // padding: 24rpx 0rpx ;
    // margin: 0px 24px;

    .service_item {
        width: 20%;
        margin-bottom: 24rpx;
        // flex: auto;
        // width: calc((100% - 248rpx)/5);
        // margin-right:62rpx ;
        .service_icon {
            img {
                width: 60rpx;
                height: 60rpx;
            }
        }

        .service_text {
            line-height: 28rpx;
            font-size: 28rpx;
            text-align: center;
            color: #333333;
        }
    }
    .service_item:nth-child(5n) {
        margin-right: 0rpx;
    }
}
// 三张图的banner
.card_three_banner{
    margin-top: 24rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    // padding: 24rpx;
    // background: #ffffff;
    // border-radius: 25rpx;
}
// 三张banner
.middle {
    .card_top_banner{
        width: 100%;
        height: 202rpx;
        img{
            width: 100%;
            height: 202rpx;
        }
    }
    .middle_title{
        font-size: 36rpx;
        text-align: left;
        color: #111111;
        line-height: 36rpx;
        font-weight: bolder;
    }
    
    .middle_subtitle{
        font-size: 20rpx;
        text-align: left;
        color: #333333;
        line-height: 20rpx;
        margin-top: 12rpx;
    }

    .card_middle_bottom{
        margin-top: 24rpx;
        padding: 24rpx;
        background-color: #ffffff;
        
        .card_middle_bottom_banner{
            display: flex;
            // justify-content: space-between;
            align-items: center;
            margin-top: 24rpx;

            .bottom_left, .bottom_middle,.bottom_right {
                width: calc((100% - 44rpx)/3);
                display: flex;
                flex-direction: column;
                justify-content: center;
        
                img {
                    width: 100%;
                    height: auto;
                }
            }
            .bottom_left, .bottom_middle{
                margin-right: 22rpx;
            }
        }
    }



	// 图片+文字位置
	.middle_position {
		position: relative;
	}

	.middle_text {
		position: absolute;
		line-height: 32rpx;
		font-weight: bolder;
		font-size: 32rpx;
		text-align: left;
		color: #FFFFFF;
	}

	.right_text_position {
		top: 40%;
		left: 5%;
	}

	.left_text_position {
		top: 25%;
		left: 10%;
	}

}


// 服务流程
.card_process{
    margin-top:26rpx;
    background: #ffffff;
    border-radius: 12px;
    padding-left: 24rpx;
    padding-right: 24rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;

    
    .card_process_title{
        font-weight: bolder;
        font-size: 36rpx;
        line-height: 36rpx;
        text-align: left;
        color: #111111;
        padding-top:11px ;
    }
    .card_process_content{
        padding-top: 16px;
        padding-bottom: 19px;
        display: flex;
        // align-items: center;  //会影响箭头
        text-align: center;
    }
    .process_item {
        flex: 1;

        .arrow_img {
            // width: 100rpx;
            height: 100rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 24rpx;
                height: 18rpx;
            }
        }

        .process_icon {
            img {
                width: 100rpx;
                height: 100rpx;
            }
        }

        .process_text {
            margin-top: 24rpx;
            font-size: 24rpx;
            text-align: center;
            color: #000000;
            line-height: 24rpx;
        }
    }

}


.card_service_list{
    margin-top: 26rpx;
    margin-left: 24rpx;
    margin-right: 24rpx;
    
}

.goodsListBox{    
    width: 100%;
    display: flex;
    justify-content: space-between;
    // justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* 允许Flex项目换行 */
   text-align: center;
}

.serviceGoodsList {
    width: 48%;
    // flex: 0 0 calc((100% - 24px) / 2);
    // 盒子整体 距下一个10px、
    margin-bottom: 20rpx;
    // margin-right: 20rpx;
    border-radius:12px;
    background: #ffffff;
    

.serviceGoods_img {
    // height: 170px;
    // line-height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
        width: 100%;
        height: auto;
    }
}
.serviceGoods_title {
    max-width:calc(100% - 64rpx); 
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 32rpx;
    // line-height: 32rpx;
    text-align: left;
    color: #333333;
    margin: 20rpx 32rpx 0rpx 32rpx;
}
.serviceGoods_subtitle {
    max-width:calc(100% - 64rpx); 
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 26rpx;
    // line-height: 26rpx;
    text-align: left;
    color: #666666;
    margin: 16rpx 32rpx 0rpx 32rpx;
}

.serviceGoods_price {
    font-weight:bolder;
    line-height: 32rpx;
    font-size: 32rpx;
    text-align: left;
    margin-top: 14rpx;
    margin-bottom: 20rpx;
    margin-left: 32rpx;
    color: #FF6203;
}

}

.serviceGoodsList:nth-child(2n) {
    margin-right: 0;
}


.b12{
    margin-bottom: 12px;
}
</style>
